<template>
  <div class="iframe">
    <div class="i-title">
      <h3>watchEffect 侦听数据</h3>
    </div>
    <div class="i-tip">
      随机数： {{str}}
    </div>
    <div class="i-tip">
      生成次数： {{strTip}}
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
let str = ref(0);
let strTip = ref("...");
let num = ref(0);
let count = ref(0);
setInterval(() => {
  num.value = Math.floor(Math.random() * (100 - 1)) + 1;
  str.value = num.value;
}, 1000);
watchEffect(() => {
  console.log(num.value);
  count.value++;
  strTip.value = count.value;
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
